<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://v3.bootcss.com/assets/css/docs.min.css">
    <link rel="stylesheet" href="./css/first.css"/>
    <title>HTML、CSS前端面试题总结</title>
</head>
<body>
    <div class="container">
        <nav class="text-center"><h1>HTML、CSS前端面试题总结</h1></nav>
        <article>
            <div class="bs-callout bs-callout-info">
                <h4>1.对WEB标准以及W3C的理解与认识</h4>
                <p>标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;</p>
                <h4>2.xhtml和html有什么区别</h4>
                <p>HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言<br/>
                　　最主要的不同：<br/>
                　　  XHTML 元素必须被正确地嵌套。<br/>
                　　  XHTML 元素必须被关闭。<br/>
                　　  标签名必须用小写字母。<br/>
                　　  XHTML 文档必须拥有根元素。
                </p>
                <h4>3.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?</h4>
                <p>用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug</p>
                <h4>4.行内元素有哪些?块级元素有哪些?CSS的盒模型?</h4>
                <p>块级元素：div p h1 h2 h3 h4 form ul;</p>
                <p>行内元素: a b br i span input select;</p>
                <p>Css盒模型:内容，border ,margin，padding</p>

                <h4>5.CSS引入的方式有哪些? link和@import的区别是?</h4>
                <p>•外部样式表，引入一个外部css文件</p>
                <p>•内部样式表，将css代码放在 &lt;head&gt; 标签内部</p>
                <p>•内联样式，将css样式直接定义在 HTML 元素内部</p>
                <p>CSS引入方式:内联 内嵌 外链 导入;</p>
                <p>区别 ：</p>
                <p>同时加载,前者无兼容性，后者CSS2.1以下浏览器不支持,</p>
                <p>Link 支持使用javascript改变样式，后者不可</p>
                <h4>6.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?</h4>
                <p>•派生选择器（用HTML标签申明）</p>
                <p>•id选择器（用DOM的ID申明）</p>
                <p>•类选择器（用一个样式类名申明）</p>
                <p>•属性选择器（用DOM的属性申明）</p>
                <p>除了前3种基本选择器，还有一些扩展选择器，包括</p>
                <p>•后代选择器（利用空格间隔，比如div .a{  }）</p>
                <p>•群组选择器（利用逗号间隔，比如p,div,#a{  }）</p>
                <p>标签选择符 类选择符 id选择符</p>
                <p> 继承不如指定 Id>class>标签选择</p>
                <p>后者优先级高</p>

                <p>CSS选择器的优先级是怎么样定义的？</p>
                <p>基本原则：</p>
                <p>一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。</p>
                <p>复杂的计算方法：</p>
                <p>•用1表示派生选择器的优先级</p>
                <p>•用10表示类选择器的优先级</p>
                <p>•用100标示ID选择器的优先级</p>
                <p>•div.test1 .span var 优先级 1+10 +10 +1</p>
                <p>•span#xxx .songs li 优先级1+100 + 10 + 1</p>
                <p>•#xxx li 优先级 100 +1</p>
                <h4>7.前端页面有哪三层构成，分别是什么?作用是什么?</h4>
                <p>结构层 Html 表示层 CSS 行为层 js</p>
                <h4>8.css的基本语句构成是?</h4>
                <p>选择器{属性1:值1;属性2:值2;……}</p>
                <h4>9.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?</h4>
                <p>Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)</p>
                <p>* IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；</p>
                <h4>10.写出几种IE6 BUG的解决方法</h4>
                <p>1.双边距BUG float引起的 使用display</p>
                <p>2.3像素问题 使用float引起的 使用dislpay:inline -3px</p>
                <p>3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active</p>
                <p>4.Ie z-index问题 给父级添加position:relative</p>
                <p>5.Png 透明 使用js代码 改</p>
                <p>6.Min-height 最小高度 !Important 解决</p>
                <p>7.select 在ie6下遮盖 使用iframe嵌套</p>
                <p>8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px)</p>
                <p>9.ie 6 不支持!important</p>
                <h4>11.img标签上title与alt属性的区别是什么?</h4>
                <p>Alt 当图片不显示是 用文字代表。</p>
                <p>Title 为该属性提供信息</p>
                <h4>12.描述css reset的作用和用途。</h4>
                <p>Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一</p>
                <h4>13.解释css sprites，如何使用。</h4>
                <p>Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量</p>
                <h4>14.浏览器标准模式和怪异模式之间的区别是什么?</h4>
                <p>盒子模型 渲染模式的不同---使用 window.top.document.compatMode 可显示为什么模式</p>
                <h4>15.你如何对网站的文件和资源进行优化?期待的解决方案包括：</h4>
                <p>文件合并</p>
                <p>文件最小化/文件压缩</p>
                <p>使用CDN托管</p>
                <p>缓存的使用</p>
                <h4>16.什么是语义化的HTML?</h4>
                <p>直观的认识标签 对于搜索引擎的抓取有好处</p>
                <h4>17.清除浮动的几种方式，各自的优缺点</h4>
                <p>1.使用空标签清除浮动 clear:both(理论上能清楚任何标签，，，增加无意义的标签)</p>
                <p>2.使用overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)</p>
                <p>3.是用afert伪元素清除浮动(用于非IE浏览器)</p>
                <h4>18.css hack</h4>
                <p>针对不同的浏览器写不同的CSS code的过程，就是CSS hack。</p>
                <p>&lt;!--[if IE 6]--&gt;&lt;![end if]--&gt;</p>
            　　 <p>_marging \\IE 6</p>
            　　 <p>+margin \\IE 7</p>
            　　 <p>Marging:0 auto \9 所有Ie</p>
            　　 <p>Margin \0 \\IE 8</p>
                <h4>19.div+css的布局较table布局有什么优点？</h4>
                <p>•改版的时候更方便 只要改css文件。</p>
                <p>•页面加载速度更快、结构化清晰、页面显示简洁。</p>
                <p>•表现与结构相分离。</p>
                <p>•易于优化（seo）搜索引擎更友好，排名更容易靠前。</p>
                <h4>20.a：img的alt与title有何异同？b：strong与em的异同？</h4>
                <p>a:</p>
                <p>•alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)</p>
                <p>•title(tool tip):该属性为设置该属性的元素提供建议性的信息。</p>
                <p>b:</p>
                <p>•strong:粗体强调标签，强调，表示内容的重要性</p>
                <p>•em:斜体强调标签，更强烈强调，表示内容的强调点</p>
                <h4>21.为什么利用多个域名来存储网站资源会更有效？</h4>
                <p>•CDN缓存更方便</p>
                <p>•突破浏览器并发限制</p>
                <p>•节约cookie带宽</p>
                <p>•节约主域名的连接数，优化页面响应速度</p>
                <p>•防止不必要的安全问题</p>
                <h4>22.请谈一下你对网页标准和标准制定机构重要性的理解。</h4>
                <p>网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。</p>
                <h4>23.简述一下src与href的区别</h4>
                <p>src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。</p>
                <p>src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。</p>
                <p>&lt;script src ="js.js">&lt;/script&gt;</p>
                <p>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。</p>
                <p>href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加</p>
                <p>&lt;link href="common.css" rel="stylesheet"/&gt;</p>
                <p>那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。</p>
                <h4>24.知道的网页制作会用到的图片格式有哪些？</h4>
                <p>png-8，png-24，jpeg，gif，svg。Webp,Apng</p>
                <h4>25.在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？</h4>
                <p>dns缓存，cdn缓存，浏览器缓存，服务器缓存。</p>
                <h4>26.一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验</h4>
                <p>图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。</p>
                <p>如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。</p>
                <p>如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。</p>
                <p>如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。</p>
                <p>如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。</p>
                <h4>27.谈谈以前端角度出发做好SEO需要考虑什么？</h4>
                <p>了解搜索引擎如何抓取网页和如何索引网页</p>
                    　　<p>你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。</p>
                <p>Meta标签优化</p>
                    　　<p>主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。</p>
                <p>如何选取关键词并在网页中放置关键词</p>
                    　　<p>搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。</p>
                <p>了解主要的搜索引擎</p>
                    　　<p>虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。</p>
                <p>主要的互联网目录</p>
                    　<p>　Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。</p>
                <p>按点击付费的搜索引擎</p>
                    　　<p>搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。</p>
                <p>搜索引擎登录</p>
                    　　<p>网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。</p>
                <p>链接交换和链接广泛度（Link Popularity）</p>
                    　　<p>网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。</p>
                <p>合理的标签使用</p>
                <h4>28.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？</h4>
                <p>最基本的：</p>
                <p>设置display属性为none，或者设置visibility属性为hidden</p>
                <p>技巧性：</p>
                <p>设置宽高为0，设置透明度为0，设置z-index位置在-1000</p>
                <h4>29.超链接访问过后hover样式就不出现的问题是什么？如何解决？</h4>
                <p>被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）</p>
                <h4>30.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？</h4>
                <p>块级元素(block)特性：</p>
                <p>•总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;</p>
                <p>•宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;</p>
                <p>内联元素(inline)特性：</p>
                <p>•和相邻的内联元素在同一行;
                <p>•宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小</p>
                <h4>31.浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？</h4>
                <p>&lt;input&gt;、&lt;img /&gt; 、&lt;button&gt; 、&lt;textarea&gt; 、&lt;label&gt;。</p>
                <h4>32.rgba()和opacity的透明效果有什么不同？</h4>
                <p>rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）</p>
                <h4>33.css中可以让文字在垂直和水平方向上重叠的两个属性是什么？</h4>
                <p>垂直方向：line-height</p>
                <p>水平方向：letter-spacing</p>
                <h4>34.关于letter-spacing的妙用知道有哪些么？</h4>
                <p>答案:可以用于消除inline-block元素间的换行符空格间隙问题。</p>
                <h4>35.px和em的区别</h4>
                <p>px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。</p>
                <p>浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。</p>
                <h4>36.display:none与visibility:hidden的区别是什么？</h4>
                <p>•display : 隐藏对应的元素但不挤占该元素原来的空间。</p>
                <p>•visibility: 隐藏对应的元素并且挤占该元素原来的空间。</p>
                <p>即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在</p>
                <h4>37.知道css有个content属性吗？有什么作用？有什么应用？</h4>
                <p>css的content属性专门应用在 before/after 伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。</p>
                <p>after伪元素通过 content 在元素的后面生成了内容为一个点的块级元素，再利用clear:both清除浮动。</p>
                <h4>38.CSS定位方式有哪些?position属性的值有哪些?他们之间的区别是什么?</h4>
                <p>在CSS中关于定位的内容是：position:relative | absolute | static | fixed</p>
                <p>•static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。</p>
                <p>•relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。</p>
                <p>•absolute 脱离文档流，通过 top,bottom,left,right 定位。选53D6其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。</p>
                <p>•fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。</p>
                <h4>39.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?</h4>
                <p>（1）、&lt;!DOCTYPE&gt; 声明位于文档中的最前面，处于 &lt;html&gt; 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 </p> 
                <p>（2）、严格模式的排版和 JS 运作模式是  以该浏览器支持的最高标准运行。 </p>
                <p>（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。 </p>
                <p>（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现</p>
                <h4>40.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？</h4>
                <p>（1）link属于XHTML标签，而@import是CSS提供的; </p>
                <p>（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; </p>
                <p>（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题; </p>
                <p>（4）link方式的样式的权重 高于@import的权重. </p>
                <h4>41.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？ 如何区分 HTML 和 HTML5？</h4>
                <p>HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。 * 绘画 canvas   </p>
                <p>用于媒介回放的 video 和 audio 元素  </p>
                <p>本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；   sessionStorage 的数据在浏览器关闭后自动删除 </p>
                <p>语意化更好的内容元素，比如 article、footer、header、nav、section </p>   
                <p> 表单控件，calendar、date、time、email、url、search</p>    
                <p>新的技术webworker, websockt, Geolocation </p>
                <p>* 移除的元素-纯表现的元素：basefont，big，center，font, s，strike，tt，u； </p>
                <p>对可用性产生负面影响的元素：frame，frameset，noframes；</p>
                <h4>42.支持HTML5新标签：</h4>
                <p>IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5</p>
                <p>新标签，浏览器支持新标签后，还需要添加标签默认的样式：</p>
                <p>当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架</p>
                <p>&lt;!--[if lt IE 9]&gt;</p>
                    <p>&lt;script&gt; src="http://html5shim.googlecode.com/svn/trunk/html5.js"&lt;/script&gt;</p>
                <p>&lt;![endif]--&gt;</p>
            </div>
        </article>
        <footer>
            &copy;Jhou Shuai ----HTML、CSS前端面试题总结
        </footer>
    </div>
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>